<template>
         <div class="comment-name">
                <div class="tem">
                     <span>
                    昵称:
                    </span>
                    <input type="text" placeholder="请输入昵称" v-model.trim="nameRef" maxlength="10" >
                </div>
                <div class="lenght">
                    {{commentRef.length}}/200
                </div>
               
            </div>
            <div class="comment">
                <textarea class="input-comment" placeholder='不来聊几句吗...' maxlength='200' v-model.trim="commentRef"></textarea>
            </div>
            <div class="comment-submit">
                <span v-show="isCommRef">
                    昵称或文本框为空
                </span>
                <button @click="submit">提交</button>
            </div>
    <Captcha :isShow="isShowMessge" @closeMes='close' @captchaResult='pushresult' ></Captcha>
</template>

<script>
import {ref,watch} from 'vue';
import Captcha from '../../components/captcha/index.vue';
import {isShowMessge,isClear,rIs} from '../../compostion/useRef'
export default {
   
    components:{
        Captcha
    },
    setup(p,cxt){
         const commentRef = ref('');
         const nameRef = ref('');
         const isCommRef = ref(false);


         const submit = ()=>{
             if(nameRef.value == '' || commentRef.value == ''){
                 isCommRef.value = true;
                 setTimeout(()=>{
                     isCommRef.value = false;
                 },1000)
                return;
             };
             isShowMessge.value = true;
             isClear.value = false;
           
         }
        const pushresult = (text)=>{
              cxt.emit("pushComment",{
                name:nameRef.value,
                content:commentRef.value,
                ...text
             });
             
            

        }
        watch(isShowMessge,()=>{ 
            if((!isShowMessge.value) && isClear.value ){
                nameRef.value = '';
                commentRef.value = '';
            }
             
        })

         const close = ()=>{
             isShowMessge.value = false;
             rIs.value = false;

         }
        return{
            commentRef,
            nameRef,
            submit,
            isCommRef,
            isShowMessge,
            close,
            pushresult,
        }
    }

}
</script>

<style lang="less" scoped>
 .comment-name{
        height: 30px;
        padding: 10px 0;
        display: flex;
        justify-content:space-between;
        flex-wrap: nowrap;
        .tem{
            width: 60%;
            display: flex;
            flex-wrap: nowrap;
            span{
                height: 100%;
                width: 60px;
                font-size: 18px;
                line-height: 30px;
            }
            input{
                width: 60%;
                height: 25px;
                border: 2px dashed #eaecef;
                border-radius: 3px;
            }
        }
        
       .lenght{
            height: 100%;
            line-height: 50px;
            color:#999;
           
        }
    }
        .comment{
        width: 100%;
        height: 100px;
        .input-comment{
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
             resize: none;
            border: 2px dashed #eaecef;
            font-size: 20px;
        }
    }
    .comment-submit{
        padding: 20px 10px;
        display: flex;
        justify-content: flex-end;
        span{
            color: #f00;
            padding: 0 5px 0 0;
            line-height: 35px;
        }
        button{
            width: 70px;
            height: 35px;
            cursor: pointer;
            background: #67c23a;
            color: #fff;
            border: 1px solid #67c23a;
            border-radius: 5px;
            &:hover{
                background: #86c566 ;
            }
        }
    }
</style>